<template>
  <button :class="['btn', 'btn-' + type]" @click="tabClick">
    <span><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: "",
  props: {
    type: {
      type: String,
      default: "default",
    },
  },
  methods: {
    tabClick() {
      this.$emit("button");
    },
  },
};
</script>

<style scoped>
.btn {
  width: 100%;
  border: none;
  padding: 10px 0;
}
.btn-primary {
  background-color: blue;
  color: #fff;
}
.btn-danger {
  background-color: red;
  color: #fff;
}
.btn-warn {
  background-color: orange;
  color: #fff;
}
</style>
